<template>
    <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'我的上级'" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{  color:'$uni-text-color',fontSize:'32rpx',fontWeight:'600' }">
        <view class="area max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px'}">
            <scroll-view scroll-y :style="{height: `calc(100vh - ${safeAreaInsets?.top + 74}px)`}" v-if="proxy_list.length != 0" @scrolltolower='listScrolltolower'>
                <view class="list_item" v-for="(item,index) of proxy_list" :key="index">
                    <view class="title">{{ item.department.company.name }} / {{ item.department.name }}</view>
                    <view class="time_box">
                        <view class="surface"><image :src="`${baseUrl}/uploads/uniapp_image/user/gongzitiao_icon_time@2.png`" mode="scaleToFill"/></view>
                        <view class="time">加入时间：{{ formatDate(item.createtime) }}</view>
                    </view>
                    <view class="message_box">
                        <view class="image"><image :src="`${baseUrl}${item.share.avatar}`" mode="scaleToFill"/></view>
                        <view class="company">{{ item.share.nickname }}</view>
                        <view class="inviter">邀请人</view>
                    </view>
                    <view class="view_details_box" @tap="skipDetails(item)">
                        <view class="details">查看详情</view>
                        <view>
                            <up-icon :bold="true" name="arrow-right" color="#666666" size="13"></up-icon>
                        </view>
                    </view>
                </view>
                <view v-if="total > 20">
                    <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
                </view>
            </scroll-view>
            <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
        </view>
    </s-layout>
</template>
<script setup>
    import { baseUrl } from '@/sheep/config';
    import { onLoad } from "@dcloudio/uni-app";
    import { ref } from "vue";
    import sheep from "@/sheep";
    import { formatDate } from '@/utils/fn.js';
    // 获取系统信息
    const { safeAreaInsets } = uni.getSystemInfoSync();
    onLoad((option) => {
        my_parent_listData()
    });

    const proxy_list = ref([])
    const page = ref(1)
    const total = ref(0)
    const current_page = ref()
    const last_page = ref()
    // 封装我的代理接口
    const my_parent_listData = async () => {
        let params = {
            source:'children',
            page:page.value
        }
        const res = await sheep.$api.agency.my_parent_listAPI(params)
        proxy_list.value = [...proxy_list.value,...res?.data.rows]
        total.value = res.data.total
        current_page.value = res.data.current_page
        last_page.value = res.data.last_page
    }

    // 滚动触底事件 + 分页处理
    const loadmoreRef = ref()
    const listScrolltolower = () => {
        loadmoreRef.value.PopupScrolltolower()
        if (current_page.value < last_page.value) {
            page.value += 1;
        } else {
            return;
        }
        my_parent_listData()
    }

    // 跳转详情
    const skipDetails = (item) => {
        let itemobj = JSON.stringify(item);
        sheep.$router.go('/subpackage/user/user/superior_details',{
            item:itemobj
        })
    }
</script>
    
<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }

    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    // 最大盒子
    .max_box { 
        margin-top: 20rpx;
    }

    // 每一条数据
    .list_item {
        margin-bottom: 20rpx;
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        padding: 40rpx 30rpx 30rpx 30rpx;
        .title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 36rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            margin-bottom: 20rpx;
        }
        .time_box {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;
            .surface {
                width: 26rpx;
                height: 26rpx;
                margin-right: 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
            }
            .time {
                font-family: PingFangSC;
                color: #666666;
                font-weight: 500;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
            }
        }
        .message_box {
            display: flex;
            align-items: center;
            padding-bottom: 36rpx;
            border-bottom: 2rpx solid #EFEFEF;
            margin-bottom: 20rpx;
            .image {
                width: 44rpx;
                height: 44rpx;
                margin-right: 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 16.5px;
                }
            }
            .company {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: 22rpx;
                font-style: normal;
                text-decoration: none;
                margin-right: 18rpx;
            }
            .inviter {
                border-radius: 4px;
                background-color: #F4F7FF;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 20rpx;
                font-style: normal;
                text-decoration: none;
                padding: 5rpx;
            }
        }
        .view_details_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .details {
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
            }
        }

    }

</style>